<template>
  <div class="app-container">
    <el-form ref="dataForm" size="mini" :inline="true" :model="dataForm">
      <div style="margin-left: 20px;padding-top:20px;">
        <el-row>
          <el-form-item label="零件名称:">
            <el-input v-model="dataForm.componentsName" @change="dateChange" placeholder="模糊查询" clearable/>
          </el-form-item>
          <el-form-item label="托盘类型:">
            <el-input v-model="dataForm.trayType" @change="dateChange" placeholder="模糊查询" clearable/>
          </el-form-item>
          <el-form-item label="物料类型:">
            <el-select v-model="dataForm.type" @change="dateChange" clearable>
              <el-option label="全部" value="" />
              <el-option label="板材" value="1" />
              <el-option label="型材" value="2" />
              <el-option label="零件" value="3" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button type="primary" :loading="dataListLoading" @click="getDataList()">查询</el-button>
          </el-form-item>
        </el-row>
      </div>
    </el-form>
    <el-table
      ref="dataTable"
      v-loading="dataListLoading"
      :data="dataList"
      height="630"
      border
      size="small"
      style="width: 100%;"
    >
      <el-table-column prop="id" header-align="center" align="center" label="序号" width="70px"/>
      <el-table-column prop="trayLocation" header-align="center" align="center" label="工位编号" width="220px"/>
      <el-table-column prop="trayNo" header-align="center" align="center" label="托盘编号" width="160px"/>
      <el-table-column prop="trayType" header-align="center" align="center" label="托盘类型" width="100px"/>
      <el-table-column prop="segmentNo" header-align="center" align="center" label="分段号" width="100px"/>
      <el-table-column prop="projectNo" header-align="center" align="center" label="项目号" width="100px"/>
      <el-table-column prop="componentsNo" header-align="center" align="center" label="物料的零件号" width="240px"/>
      <el-table-column prop="componentsName" header-align="center" align="center" label="零件名称" width="100px"/>
      <el-table-column prop="material" header-align="center" align="center" label="材质" width="100px"/>
      <el-table-column prop="length" header-align="center" align="center" label="物料长度" width="100px"/>
      <el-table-column prop="width" header-align="center" align="center" label="物料宽度" width="100px"/>
      <el-table-column prop="height" header-align="center" align="center" label="物料高度" width="100px"/>
      <el-table-column prop="weight" header-align="center" align="center" label="物料重量(kg)" width="100px"/>
      <el-table-column prop="quantity" header-align="center" align="center" label="物料数量" width="100px"/>
      <el-table-column prop="type" header-align="center" align="center" label="物料类型" width="100px">
        <template slot-scope="scope">
          <span v-if="scope.row.type === '1'">板材</span>
          <span v-if="scope.row.type === '2'">型材</span>
          <span v-if="scope.row.type === '3'">零件</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      align="center"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
    />
  </div>
</template>

<script>
export default {
  name: 'materialData',
  data () {
    return {
      dataForm: {
        trayType: '',
        type: '',
        componentsName: ''
      },
      dataList: [],
      pageIndex: 1,
      totalPage: 0,
      pageNum: 1,
      pageSize: 10,
      dataListLoading: false
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    // 获取数据列表
    getDataList (index) {
      const params = {}
      const { trayType, componentsName, type } = this.dataForm
      this.pageIndex = index || this.pageIndex
      params.pageSize = this.pageSize
      params.pageNum = this.pageIndex
      params.trayType = trayType
      params.componentsName = componentsName
      params.type = type
      console.log('查询参数', params)
      // 请求后台
      const that = this

      this.$http({
        url: this.$http.adornUrl('TotalFactor/material-data/list'),
        method: 'get',
        params: params
      }).then(function (resp) {
        console.log(resp)
        that.dataList = resp.data.data.dataList
        that.totalPage = resp.data.data.total
        console.log('请求成功：' + resp.status + ',' + resp.statusText)
      }).catch(resp => {
        console.log('请求失败：' + resp.status + ',' + resp.statusText)
      })
    },
    // 触发器
    dateChange () {
      this.pageIndex = 1
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    }
  }
}
</script>
<style>
.el-table .cell {
  max-height: 200px;
  overflow-y: auto;
}
</style>
